<template>
    <div>
        <el-button 
        :type="attributeSet.type"
        >{{attributeSet.text}}</el-button>
    </div>
</template>
<script lang="ts" setup>
    import {ref,reactive,Component, PropType,watch} from 'vue'
    import {useRenderTreeStore} from '@/store/renderTree'
    import emitter from '@/utils/emitter'

    const attributeSet=reactive({
        type:'',
        text:'',
    });
    const store=useRenderTreeStore();
    const props=defineProps({
        itemProps:{
            type:Object as PropType<PropMap>,
            required:true
        },
        dataNodeId:{
            type:String,
        }
    })
    console.log('----button',props,props.itemProps)
    if(props.itemProps){
        attributeSet.type=props.itemProps['type'].text || props.itemProps['type'].default; //属性type
        attributeSet.text=props.itemProps['text'].text; //属性text
        console.log('-----解析props结果',props.itemProps['type'],props.itemProps['text'])
    }

    /**
     * 核心问题：
     * ——组件初始化时，emitter.on 会执行并完成事件注册，且此时拼接的事件名称会被 “固定” 下来，
     * 后续哪怕事件名中依赖的变量（比如 store.id）发生变化，已经注册的事件名也不会自动更新
     * 解决方案：
     * ——使用其组件自身的id,而不依赖于store中的id,那么在组件初始化时，该组件的id是固定的。并不会像store中的值一样发生变化，
     * 从null=》xxxxxxx 从null到有值的情况
     */
    //接收组件设置区的信息
    interface messageInterface{
        props:PropMap,
        props_attribute:string
    }
    const id=props.dataNodeId;
    emitter.on(`component:update:${id}`,(message:messageInterface)=>{
        console.log('button接收到了',message,message.props)
        if(message.props_attribute=='type'){
            attributeSet.type=message.props[message.props_attribute].text; //按钮类型
        }
        if(message.props_attribute=='text'){
            attributeSet.text=message.props[message.props_attribute].text; //按钮文本
        }
        
    })
</script>